<template>
  <el-drawer v-model="state.dialog.isShowDialog" :title="state.dialog.title" :with-header="true" direction="ltr"
    size="100%" custom-class="patientDetailDrawer" @close="closeDialog">
    <div class="system-menu-container">
      
      <div class="user-info-box flex space-between" v-if="state.detailData">
        <div class="user-info-left">
          <div class="img-box flex justify-center">
            <img :src="icon" alt="">
          </div>
          <div class="name">{{ state.detailData.patient.name }}</div>
          <div class="btn-box flex justify-center">
            <el-button size="default" type="primary" plain round @click="goLog()" style="width: 88px;">日志</el-button>
          </div>

        </div>
        <div class="sp-line"></div>
        <div class="user-info-right">
          <div class="info-top">
            <div class="info-item">
              <span class="item-tit">性别：</span>
              <span class="item-con">{{ sexObj[state.detailData.patient.gender] }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">年龄：</span>
              <span class="item-con">{{ state.detailData.age || '-' }}</span>
            </div>
          </div>
          <div class="info-center">
            <div class="info-item">
              <span class="item-tit">入院病区：</span>
              <span class="item-con">{{ state.detailData.hospitalArea ? state.detailData.hospitalArea.name : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">入院诊断：</span>
              <span class="item-con">{{ state.detailData.preDiagnosis }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">就诊科室：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.department) ?
                state.detailData.operation.department.departmentName : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">主刀医生：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.chiefDoctor) ?
                state.detailData.operation.chiefDoctor.name : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">医生电话：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.chiefDoctorPhone) ?
                state.detailData.operation.chiefDoctorPhone : '-' }}</span>
            </div>
          </div>
          <div class="info-bottom">
            <div class="info-item">
              <span class="item-tit">执行手术：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.operation) ?
                state.detailData.operation.operation.name : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">部位：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.position) ?
                state.detailData.operation.position : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">侧别：</span>
              <span class="item-con">{{ (state.detailData.operation && state.detailData.operation.direction) ?
                state.detailData.operation.direction : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">麻醉方式：</span>
              <span class="item-con">{{ (state.detailData.anesthesiaAssessment &&
                state.detailData.anesthesiaAssessment.anesthesiaMode) ?
                state.detailData.anesthesiaAssessment.anesthesiaMode.name : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="item-tit">登记号：</span>
              <span class="item-con">{{ state.detailData.recordId }}</span>
            </div>
          </div>
        </div>

        <div>
          <el-button size="default" type="primary" @click="goInfo()" style="width: 88px;">诊疗信息</el-button>
        </div>
      </div>

      <div class="page-main flex space-between">
        <div class="detail-l">
          <div class="status-list">
            <div class="status-item flex space-between align-center" v-for="(item, index) in state.statusList" :key="index"
              @click="changeStatus(item.name)" :class="state.activeStatus == item.name ? 'active' : ''">
              <div>
                <SvgIcon class="icon" :name="item.icon" />
                <span class="name">{{ item.name }} </span>
              </div>

              <SvgIcon v-if="item.finished" class="success-icon" name="ele-Check" />
            </div>
          </div>
        </div>
        <div class="detail-r">
          <div v-if="state.activeStatus == '日间申请'">
            <ApplyDaily :datas="state.detailData" :dtid="state.detailId" @refresh="getDetail()" />
          </div>
          <!-- 手术预约 -->
          <div v-if="state.activeStatus == '手术预约'">
            <OperationOrder :datas="state.detailData" />
          </div>

          <div v-if="state.activeStatus == '中心核对'">
            <CenterCheck :datas="state.detailData" />
          </div>

          <div v-if="state.activeStatus == '入院前宣教'">
            <BeforeEdu :datas="state.detailData" />
          </div>

          <div v-if="state.activeStatus == '出院评估'">
            <LeaveAssess :datas="state.detailData" />
          </div>

          <div v-if="state.activeStatus == '退出日间'">
            <ExitDaytime :datas="state.detailData" />
          </div>

          <div v-if="state.activeStatus == '患者360视图'">
            <div class="com-box">
              <div class="common-title">
                患者360视图
              </div>
            </div>

            <div class="iframe-box">
              <iframe v-if="state.recordUrl" :src="state.recordUrl" frameborder="0"
                style="width:100%;height: 800px;"></iframe>
              <div v-else>
                <el-empty description="暂无患者360视图" />
              </div>
            </div>

          </div>

        </div>
      </div>

      <logDialog ref="logDialogRef" />
    </div>
  </el-drawer>
</template>

<script setup name="patientDetailDrawer">
const emit = defineEmits(['refresh']);
import { dsApi } from '/@/api/ds/index';
import { usePatientDetail } from '/@/stores/patientDetail';
import { storeToRefs } from 'pinia'
import icon from '/@/assets/meow.png';
const logDialog = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/logDialog.vue'));

const stores = usePatientDetail();
const { sexObj } = storeToRefs(stores);
// 引入组件
const ApplyDaily = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/applyDaily.vue'));
const OperationOrder = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/operationOrder.vue'));
const CenterCheck = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/centerCheck.vue'));
const BeforeEdu = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/beforeEdu.vue'));
const LeaveAssess = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/leaveAssess.vue'));
const ExitDaytime = defineAsyncComponent(() => import('/@/views/dsProcess/overview/components/exitDaytime.vue'));
const logDialogRef = ref()
// 定义变量内容
const state = reactive({
  dialog: {
    isShowDialog: false,
    title: '患者详情',
  },
  detailId: null,
  detailLoading: false,
  detailData: null,
  statusList: [
    {
      name: '日间申请',
      icon: 'ele-Checked',
      finished: true
    },
    {
      name: '手术预约',
      icon: 'ele-Operation',
      finished: false
    },
    {
      name: '中心核对',
      icon: 'ele-Operation',
      finished: false
    },
    {
      name: '入院前宣教',
      icon: 'ele-Operation',
      finished: false
    },
    {
      name: '出院评估',
      icon: 'ele-Operation',
      finished: false
    },
    {
      name: '退出日间',
      icon: 'ele-Operation',
      finished: false
    },
    {
      name: '患者360视图',
      icon: 'ele-Operation',
      finished: false
    },
  ],
  activeStatus: '日间申请',
  recordUrl: ''
});



// 打开弹窗
const openDrawer = (id) => {
  state.detailId = id
  getDetail()
  getUrl()

  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  emit('refresh');
};

const route = useRoute();

// 页面加载时
onMounted(() => {

});

const goLog = () => {
  logDialogRef.value.openDialog(state.detailData);
}

const goInfo = () => {

}

const changeStatus = (value) => {
  state.activeStatus = value
}

const getDetail = () => {
  state.detailLoading = true
  dsApi().recordDetail({ prid: state.detailId }).then(res => {
    state.detailLoading = false
    state.detailData = res.data
    changeStatusIcon()
  }).catch(() => {
    state.detailLoading = false
  })
}

const getUrl = () => {
  dsApi().getMedicalRecordUrl({ prid: state.detailId }).then(res => {
    state.recordUrl = res.data.url
  }).catch(() => {
    state.recordUrl = ''
  })
}

const changeStatusIcon = () => {
  // 手术预约
  if (state.detailData.operation && state.detailData.operation.operationAt) {
    state.statusList[1].finished = true
  }
  if (state.detailData.centreCheck && state.detailData.centreCheck.checkStatus == 3) {
    state.statusList[2].finished = true
  }
  if (state.detailData.preoperativeEducation) {
    state.statusList[3].finished = true
  }
  if (state.detailData.dischargeProblemAnswer && state.detailData.dischargeProblemAnswer.length > 0) {
    state.statusList[5].finished = true
  }
}

// 暴露变量
defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
.user-info-box {
  width: 100%;
  height: 160px;
  background-color: #fff;
  padding: 10px;
  padding-left: 0;

  .user-info-left {
    width: 188px;

    .img-box {
      img {
        width: 53px;
        height: 53px;
        border-radius: 53px;
      }
    }

    .name {
      color: #333;
      font-size: 16px;
      text-align: center;
      margin-top: 10px;
    }

    .btn-box {
      margin-top: 20px;
    }
  }

  .sp-line {
    width: 1px;
    height: 95%;
    background-color: #E8E8E8;
  }

  .user-info-right {
    width: calc(100% - 190px - 90px);
    padding: 20px;

    .info-top,
    .info-center,
    .info-bottom {
      display: grid;
      grid-template-columns: repeat(5, 1fr);

      .item-tit {
        color: #666;
      }

      .item-con {
        color: #333;
      }
    }

    .info-top,
    .info-center {
      margin-bottom: 20px;
    }

  }

}

.page-main {
  // min-height: 700px;
  padding: 10px;

  .detail-l {
    width: 170px;
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;

    .status-list {
      .status-item {
        height: 35px;
        line-height: 35px;
        color: #777777;
        margin-bottom: 10px;
        border-radius: 3px;
        padding: 0 8px;
        cursor: pointer;
        font-size: 15px;

        &.active {
          background-color: rgba(240, 248, 255, 1);
          color: #409EFF;
          font-weight: bold;
        }

        .icon {
          transform: translateY(2px);
        }

        .name {
          margin-left: 10px;
        }

        .success-icon {
          color: #81B337;
        }
      }
    }
  }

  .detail-r {
    width: calc(100% - 170px - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
  }
}</style>
